<template>
  <div class="tructionteam" style="background: #fff">
    <!-- 头部图片 -->
    <!-- <div style="width: 100%; height: 1rem">
      <img
        src="../../assets/images/mehead.jpg"
        alt=""
        style="width: 100%; height: 8rem"
      />
    </div> -->
    <!-- 头部栏 -->

    <div
      style="
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
        background: white;
      "
    >
      <div
        style="
          width: 90%;
          height: 8rem;
          margin: auto;
          background: white;
          padding-top: 2.2rem;
          border-radius: 10px;
        "
      >
        <p
          style="
            width: 100%;
            text-align: center;
            background: white;
            border-radius: 10px;
          "
        >
          <img
            :src="profillist.icon"
            alt=""
            style="
              width: 4rem;
              height: 4rem;
              position: relative;
              top: -0.5rem;
              border-radius: 50%;
            "
          />
          <span
            style="
              width: 100%;
              text-align: center;
              display: inline-block;
              font-size: 1rem;
              font-weight: 550;
              letter-spacing: 2px;
            "
            >{{ profillist.name }}</span
          >
        </p>
        <p
          style="
            text-align: center;
            padding-top: 0.6rem;
            color: #5d5c61;
            font-size: 0.8rem;
          "
        >
          <span>{{ profillist.title }}</span>
          <span style="padding-left: 0.3rem">
            {{ profillist.experience }}年经验</span
          >
        </p>
      </div>
      <div style="padding: 1rem">
        <p style="font-size: 16px; font-weight: 600; padding-top: 1rem">
          个人简介
        </p>
        <p style="margin-top: 1rem">
          {{ profillist.introduce }}
        </p>
      </div>
    </div>
    <decorationlist />
    <!-- 免费为我报价 -->

    <div class="offer" v-show="offshow" @touchmove.prevent>
      <ul>
        <li style="width: 100%">
          <span style="text-align: right; width: 65%; display: inline-block">
            免费为我报价 </span
          ><span
            @click="showfreey"
            style="
              text-align: right;
              width: 35%;
              display: inline-block;
              padding-right: 1rem;
              color: #a8a89e;
            "
            >x</span
          >
        </li>
        <li>
          <p>限时免费</p>
          <p>
            免费上门量房，计算墙面积、顶面面积、地面面积、，并根据结果免费设计装修方案
          </p>
        </li>
        <li><p>稍后装修公司将会电话联系你，沟通具体的装修服务流程</p></li>
        <li>
          <input
            type="number"
            v-model="callpnone"
            placeholder="请输入你的手机号码用于接收通知"
            pattern="[0-9]*"
            @keyup="onchagn()"
            @blur="onscoll()"
          />
        </li>
        <li>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              width: 65%;
              margin: auto;
            "
          >
            <p style="width: 60%; text-align: left">
              <input
                type="number"
                placeholder="请输入验证码"
                pattern="[0-9]*"
                style="width: 90%"
                @blur="onscoll()"
                @keyup="onchagn()"
                v-model="identifying"
              />
            </p>
            <p
              ref="change"
              @click="eventBtn && secode()"
              style="
                width: 40%;
                padding: 0 0.2rem;
                text-align: center;
                color: #fff;
                height: 2.4rem;
                line-height: 2.4rem;
              "
            >
              发送验证码
            </p>
          </div>
        </li>
        <li @click="sumitoff()"><p ref="changsum">立即预约</p></li>
        <li>
          <p>
            <input type="checkbox" id="checkred" checked="checked" />
            <label for="checkred"></label> <span> 我已阅读并同意</span>
            <span @click="$router.push('/renovation/note')">《服务须知》</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 遮罩层 -->
    <div
      v-show="offshow"
      style="
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 10;
        top: 0;
      "
      @click="offershow()"
      @touchmove.prevent
    ></div>
    <!-- 页面最底部 -->
    <van-goods-action style="padding: 0.6rem 0">
      <van-goods-action-icon icon="phone-o" text="电话" @click="callphoner()" />
      <!-- <van-goods-action-icon icon="comment-o" text="点评" /> -->

      <van-goods-action-button
        type="danger"
        text="免费为我报价"
        @click="offershow()"
      />
    </van-goods-action>
  </div>
</template>
<script>
import {
  Tab,
  Tabs,
  Toast,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from 'vant';
import {
  getdecList,
  getent,
  code,
  deco,
  verificat,
  rationteam,
} from '@/api/api';
import { getLocalStorage } from '@/utils/local-storage';
import decorationlist from '@/components/decorationlist';

export default {
  name: 'tructionteam',
  data() {
    return {
      active: 0,
      profillist: '',
      eventBtn: true,
      active: 0,
      offshow: false,
      identifying: '',
      userId: getLocalStorage('userId').userId,
      nickName: getLocalStorage('nickName').nickName,
      callpnone: '',
    };
  },
  created() {
    this.gedeconlist();
  },
  methods: {
    // 商铺接口
    gedeconlist() {
      rationteam({ id: Number(this.$route.params.id) }).then((res) => {
        this.profillist = res.data.data;
      });
    },
    // 解决被顶起事件
    onscoll() {
      window.scroll(0, 0);
    },
    // 免费报价
    offershow() {
      this.identifying = '';
      let changsum = this.$refs.changsum;
      changsum.classList.remove('cahngesum');
      this.offshow = !this.offshow;
    },
    showfreey() {
      this.identifying = '';
      this.offshow = false;
    },
    onchagn() {
      if (this.identifying != '' && this.callpnone != '') {
        let changsum = this.$refs.changsum;
        changsum.classList.add('cahngesum');
      } else {
        let changsum = this.$refs.changsum;
        changsum.classList.remove('cahngesum');
      }
    },
    // 立即预约
    sumitoff() {
      verificat({
        code: this.identifying,
        phone: Number(this.callpnone),
        mobile: Number(this.callpnone),
        userId: Number(this.userId),
        userName: this.nickName,
      })
        .then((res) => {
          Toast('预约成功！');
          this.identifying = '';
          this.offshow = false;
        })
        .catch((res) => {
          Toast('验证码错误');
        });
    },
    // 发送验证码
    secode() {
      let rightPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
      if (!rightPhone.test(this.callpnone)) {
        Toast('请输入正确的号码');
        return;
      } else {
        code({ phone: Number(this.callpnone) }).then((res) => {
          Toast('验证码发送成功');
          this.eventBtn = false;
          let cahngecode = this.$refs.change;
          cahngecode.classList.add('cahngecode');
          let count = 60;
          let timer = setInterval(() => {
            cahngecode.innerHTML = Number(count--) + '秒后获取';
            if (count == -1) {
              cahngecode.innerHTML = '获取验证码';
              cahngecode.classList.remove('cahngecode');
              clearInterval(timer);
              this.eventBtn = true;
            }
            // cahngecode.removeEventListener('click',secode, false);
          }, 1000);
        });
      }
    },
    // 打电话
    callphoner() {
      window.location.href = 'tel://' + this.profillist.phone;
    },
  },
  components: {
    decorationlist,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
// 验证码样式更改
.cahngecode {
  background: #a7e4cd !important;
}
.cahngesum {
  background: #26c680 !important;
}
ul {
  width: 100%;
  padding-bottom: 1rem;
  border-top: 1px solid #5d5c6175;
  li:nth-child(1) {
    padding-top: 1rem;
  }
  li:nth-child(3) {
    padding-top: 1rem;
  }
  li:nth-child(5) {
    padding-top: 1rem;
  }
  li:nth-child(7) {
    padding-top: 1rem;
  }
  li {
    width: 90%;
    margin: 0.4rem auto;
  }
}
// 免费为我报价
.offer {
  position: fixed;
  bottom: 0%;
  left: 0;
  right: 0;
  padding-bottom: 0rem;
  z-index: 30;
  ul {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    background: white;
    li:nth-child(1) {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      background: white;
      letter-spacing: 2px;
      padding: 0.7rem 0;
      font-size: 0.9rem;
      font-weight: 550;
      border-bottom: 1px solid #f3f3f3;
      p {
        border-radius: 20px;
      }
    }

    li:nth-child(2) {
      font-size: 0.8rem;
      padding-bottom: 0.5rem;
      p {
        text-align: left;
      }
      p:nth-child(1) {
        color: #dd633a;
        padding: 0.5rem 0;
      }
    }

    li:nth-child(3) {
      p {
        width: 100%;
        color: #838282;
        letter-spacing: 1px;
        padding: 0.3rem 0;
        font-size: 0.7rem;
      }
    }
    li:nth-child(4) {
      padding: 0.5rem 0;
      input {
        border: none;
        width: 65%;
        height: 2.5rem;
        padding-left: 0.5rem;
        background: #f4f7fc;
      }
      ::-webkit-input-placeholder {
        color: #b4b7be;
      }
    }
    li:nth-child(5) {
      padding: 0.5rem 0;
      input {
        border: none;
        width: 65%;
        height: 2.5rem;
        padding-left: 0.5rem;
        background: #f4f7fc;
      }
      ::-webkit-input-placeholder {
        color: #b4b7be;
      }
      p:nth-child(2) {
        background: #26c680;
      }
    }
    li:nth-child(6) {
      padding-top: 0.6rem;
      border-top: 1px solid #f3f3f3;
      P {
        width: 60%;
        padding: 0.5rem 0;
        color: white;
        font-size: 0.75rem;
        letter-spacing: 2px;
        background: #a7e4cd;
      }
    }
    li:nth-child(7) {
      padding: 1rem;

      p {
        width: 65%;
        margin: auto;
        text-align: center;
        display: flex;
        input {
          opacity: 0;
        }
        span {
          font-size: 0.65rem;
          display: inline-block;
          width: auto;
          height: 0.7rem;
        }
        span:nth-child(4) {
          color: #26c680;
        }
        label {
          margin-left: 5%;
          margin-top: 0.1rem;
          margin-right: 0.3rem;
          width: 0.7rem;
          height: 0.7rem;
          display: inline-block;

          border: 2px solid#26c680;

          border-radius: 50%;
        }
        label::after {
          margin-bottom: 0.5rem;
          margin-right: 0.5rem;
          opacity: 0;
          content: '';
          color: white;
          display: inline-block;
          border: 2px solid #fff;
          border-top: none;
          border-right: none;
          width: 0.4rem;
          height: 0.2rem;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
        // 用加号使得label和input属性共通，只有label可以做到
        input[type='checkbox']:checked + label {
          background: #26c680;
        }
        input[type='checkbox']:checked + label:after {
          opacity: 1;
        }
      }
    }
    li {
      text-align: center;
      width: 100%;
      p {
        width: 90%;
        margin: auto;
        text-align: center;
      }
    }
  }
}
</style>